<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue组件</title>
    <script src="https://unpkg.com/vue@next"></script>
    <!-- 
        1.假设将hello world两个字拆分为单个组件
        组件的复用性,数据单独独享的
        2.组件不用的时候,也是挂载到app里面的
        3.全局组件 只要定义了处处可以使用,性能不高,但是使用起来简单 
     -->
</head>
<body>
    <div id="root"></div>
    <script>
        // vue的生命周期函数
        const app = Vue.createApp({
            data() {
                return {

                }
            },
            template:`
                <div>            
                    <counter/>
                    <counter/>
                    <counter/>
                </div>
            `
        });
        // 单个组件
        app.component("counter",{
            data() {
                return {
                    count:1
                }
            },
            template: `
            <div @click="count+=1">{{count}}</div>
            `
        });
        app.component("world",{
            template: `
            <div>world</div>
            `
        });
        const vm = app.mount('#root');
    </script>
</body>
</html>